<script setup>
import Editor from '@tinymce/tinymce-vue'
import "tinymce/skins/content/default/content.css";
import tinymce from "tinymce/tinymce";
import {computed, nextTick, onMounted, ref, watchEffect} from "vue";
import RemarkHoverEnlargable from "@/components/RemarkHoverEnlargable.vue";
import HoverEnlargable from "@/components/HoverEnlargable.vue";
// import prettier from "prettier";

onMounted(()=>{
    // document.querySelector(`.tox-tinymce-aux`).style.zIndex=5000;
    (async ()=>{
        await nextTick();
        // console.log("when mounted with",document.querySelectorAll('.tox-toolbar-overlord .tox-toolbar__group .tox-tbtn'));
    })()
})
function settingUp(theEditor){
    // 通过editor.editorContainer.style.zIndex设置编辑器容器的z-index
    // console.log(`tinyMCE setup with`,theEditor);

    // console.log("and with",document.querySelectorAll('.tox-toolbar-overlord .tox-toolbar__group .tox-tbtn'));
    tinymce.PluginManager.load("template",'/public/tinymce/plugins/template/plugin.js')

    // theEditor?.editorContainer?.style?.zIndex = '1000'; // 设置一个较低的值
}

// let theValue = ref(`<p>sdafjksafads</p> <ul> <li>dfdalkfkdas</li> <li>sdflajdsafkjk</li> <li>dsfsadf</li> </ul> <hr> <div class="space-y-2"> <div class="space-y-2"> <section class="prose-lg max-w-none py-1"> <div class="-mb-4"> <h1 class="inline !mb-1 scroll-m-16 text-3xl font-bold">merge</h1> <div class="pl-2 flex-1 text-textSecondary text-xl font-serif">(v.)</div> <span id="#14670" class="scroll-m-16 text-3xl font-bold flex items-center"></span></div> <section class=""> <p>1630年代，&ldquo;沉没或陷入&rdquo;（某物中），这个意义现已过时，源自拉丁语&nbsp;<em class="foreign notranslate">mergere</em>&nbsp;&ldquo;<strong>浸泡，浸入</strong>，沉浸&rdquo;，可能是从&nbsp;<em class="foreign notranslate">*mezgo</em>&nbsp;转音而来，源自 PIE&nbsp;<em class="foreign notranslate">*mezgo-</em>&nbsp;&ldquo;浸泡，沉没，洗涤，投入&rdquo;（源头还包括梵文&nbsp;<em class="foreign notranslate">majjanti</em>&nbsp;&ldquo;沉没，潜入&rdquo;，立陶宛语&nbsp;<em class="foreign notranslate">mazgoju, mazgoti,</em>，拉脱维亚语&nbsp;<em class="foreign notranslate">mazgat</em>&nbsp;&ldquo;洗涤&rdquo;）。</p> <p>不及物动词意为&ldquo;沉没或消失于其他事物中，被<strong>吞噬，失去身份</strong>&rdquo;，始见于1726年，特指法律上的&ldquo;<strong>将财产、合同等吸收到另一个中</strong>&rdquo;。及物动词&ldquo;使被吸收或消失于其他事物中&rdquo;的意义始见于1728年。相关词汇：&nbsp;<em class="foreign notranslate">Merged</em>；&nbsp;<em class="foreign notranslate">merging</em>。名词用法始见于1805年。</p> </section> <div class="-mt-4"> <p class="text-sm caret-gray-400 flex items-center">同样来自于:<a class="ml-1 pl-1 mt-1 flex items-center no-underline" href="https://www.etymonline.com/search?sort=a&amp;q=from%3A1630s" rel="nofollow">1630s</a></p> </div> </section> </div> </div> <div class="space-y-2"><hr></div> <div class="space-y-2"> <h1 class="word__name--TTbAA" title="Origin and meaning of wash">wash&nbsp;(v.)</h1> <section class="word__defination--2q7ZH"> <p>Old English&nbsp;<span class="foreign notranslate">wascan</span>&nbsp;"to <strong>wash, cleanse, bathe</strong>," transitive sense in late Old English, from Proto-Germanic&nbsp;<span class="foreign notranslate">*watskan</span>&nbsp;"to wash" (source also of Old Norse&nbsp;<span class="foreign notranslate">vaska</span>, Middle Dutch&nbsp;<span class="foreign notranslate">wasscen</span>, Dutch&nbsp;<span class="foreign notranslate">wassen</span>, German&nbsp;<span class="foreign notranslate">waschen</span>), from PIE root&nbsp;<a class="crossreference notranslate" title="Etymology, meaning and definition of *wed- " href="https://www.etymonline.com/word/*wed-#etymonline_v_52591" rel="nofollow">*wed-</a>&nbsp;(1) "water; wet." Related:&nbsp;<span class="foreign notranslate">Washed</span>;&nbsp;<a class="crossreference notranslate" title="Etymology, meaning and definition of washing " href="https://www.etymonline.com/word/washing">washing</a>.</p> <p>Used mainly of clothes in Old English (the principal verb for washing the body, dishes, etc. being&nbsp;<span class="foreign notranslate">&thorn;wean</span>). Old French&nbsp;<span class="foreign notranslate">gaschier</span>&nbsp;"to <strong>stain, soil; soak, wash</strong>" (Modern French&nbsp;<span class="foreign notranslate">g&acirc;cher</span>) is from Frankish&nbsp;<span class="foreign notranslate">*waskan</span>, from the same Germanic source. Italian&nbsp;<span class="foreign notranslate">guazzare</span>&nbsp;also is a Germanic loan-word. To&nbsp;<span class="foreign notranslate">wash (one's) hands of</span>&nbsp;something is 1550s, from Pilate in Matthew xxvii.24. To&nbsp;<span class="foreign notranslate">wash up</span>&nbsp;"clean utensils after a meal" is from 1751.&nbsp;<span class="foreign notranslate">Washed up</span> "no longer effective" is 1923, theater slang, from notion of washing up at the end of a job.</p> </section> </div>`);
let theValue = ref(`<p>sdafjksafads</p>`);
// let theValue = ref(`<p>sdafjksafads</p>
// <ul>
//   <li>dfdalkfkdas</li>
//   <li>sdflajdsafkjk</li>
//   <li>dsfsadf</li>
// </ul>
// <hr />
// <div class="space-y-2">
//   <div class="space-y-2">
//     <section class="prose-lg max-w-none py-1">
//       <div class="-mb-4">
//         <h1 class="inline !mb-1 scroll-m-16 text-3xl font-bold">merge</h1>
//         <div class="pl-2 flex-1 text-textSecondary text-xl font-serif">
//           (v.)
//         </div>
//         <span
//           id="#14670"
//           class="scroll-m-16 text-3xl font-bold flex items-center"
//         ></span>
//       </div>
//       <section class="">
//         <p>
//           1630年代，&ldquo;沉没或陷入&rdquo;（某物中），这个意义现已过时，源自拉丁语&nbsp;
//           <em class="foreign notranslate">mergere</em>
//           &nbsp;&ldquo;
//           <strong>浸泡，浸入</strong>
//           ，沉浸&rdquo;，可能是从&nbsp;
//           <em class="foreign notranslate">*mezgo</em>
//           &nbsp;转音而来，源自 PIE&nbsp;
//           <em class="foreign notranslate">*mezgo-</em>
//           &nbsp;&ldquo;浸泡，沉没，洗涤，投入&rdquo;（源头还包括梵文&nbsp;
//           <em class="foreign notranslate">majjanti</em>
//           &nbsp;&ldquo;沉没，潜入&rdquo;，立陶宛语&nbsp;
//           <em class="foreign notranslate">mazgoju, mazgoti,</em>
//           ，拉脱维亚语&nbsp;
//           <em class="foreign notranslate">mazgat</em>
//           &nbsp;&ldquo;洗涤&rdquo;）。
//         </p>
//         <p>
//           不及物动词意为&ldquo;沉没或消失于其他事物中，被
//           <strong>吞噬，失去身份</strong>
//           &rdquo;，始见于1726年，特指法律上的&ldquo;
//           <strong>将财产、合同等吸收到另一个中</strong>
//           &rdquo;。及物动词&ldquo;使被吸收或消失于其他事物中&rdquo;的意义始见于1728年。相关词汇：&nbsp;
//           <em class="foreign notranslate">Merged</em>
//           ；&nbsp;
//           <em class="foreign notranslate">merging</em>
//           。名词用法始见于1805年。
//         </p>
//       </section>
//       <div class="-mt-4">
//         <p class="text-sm caret-gray-400 flex items-center">
//           同样来自于:
//           <a
//             class="ml-1 pl-1 mt-1 flex items-center no-underline"
//             href="https://www.etymonline.com/search?sort=a&amp;q=from%3A1630s"
//             rel="nofollow"
//           >
//             1630s
//           </a>
//         </p>
//       </div>
//     </section>
//   </div>
// </div>
// <div class="space-y-2"><hr /></div>
// <div class="space-y-2">
//   <h1 class="word__name--TTbAA" title="Origin and meaning of wash">
//     wash&nbsp;(v.)
//   </h1>
//   <section class="word__defination--2q7ZH">
//     <p>
//       Old English&nbsp;
//       <span class="foreign notranslate">wascan</span>
//       &nbsp;"to
//       <strong>wash, cleanse, bathe</strong>
//       ," transitive sense in late Old English, from Proto-Germanic&nbsp;
//       <span class="foreign notranslate">*watskan</span>
//       &nbsp;"to wash" (source also of Old Norse&nbsp;
//       <span class="foreign notranslate">vaska</span>
//       , Middle Dutch&nbsp;
//       <span class="foreign notranslate">wasscen</span>
//       , Dutch&nbsp;
//       <span class="foreign notranslate">wassen</span>
//       , German&nbsp;
//       <span class="foreign notranslate">waschen</span>
//       ), from PIE root&nbsp;
//       <a
//         class="crossreference notranslate"
//         title="Etymology, meaning and definition of *wed- "
//         href="https://www.etymonline.com/word/*wed-#etymonline_v_52591"
//         rel="nofollow"
//       >
//         *wed-
//       </a>
//       &nbsp;(1) "water; wet." Related:&nbsp;
//       <span class="foreign notranslate">Washed</span>
//       ;&nbsp;
//       <a
//         class="crossreference notranslate"
//         title="Etymology, meaning and definition of washing "
//         href="https://www.etymonline.com/word/washing"
//       >
//         washing
//       </a>
//       .
//     </p>
//     <p>
//       Used mainly of clothes in Old English (the principal verb for washing the
//       body, dishes, etc. being&nbsp;
//       <span class="foreign notranslate">&thorn;wean</span>
//       ). Old French&nbsp;
//       <span class="foreign notranslate">gaschier</span>
//       &nbsp;"to
//       <strong>stain, soil; soak, wash</strong>
//       " (Modern French&nbsp;
//       <span class="foreign notranslate">g&acirc;cher</span>
//       ) is from Frankish&nbsp;
//       <span class="foreign notranslate">*waskan</span>
//       , from the same Germanic source. Italian&nbsp;
//       <span class="foreign notranslate">guazzare</span>
//       &nbsp;also is a Germanic loan-word. To&nbsp;
//       <span class="foreign notranslate">wash (one's) hands of</span>
//       &nbsp;something is 1550s, from Pilate in Matthew xxvii.24. To&nbsp;
//       <span class="foreign notranslate">wash up</span>
//       &nbsp;"clean utensils after a meal" is from 1751.&nbsp;
//       <span class="foreign notranslate">Washed up</span>
//       "no longer effective" is 1923, theater slang, from notion of washing up at
//       the end of a job.
//     </p>
//   </section>
// </div>
// `);
let reFormatedTheValue = ref(``);
let testStayEnlarged = ref(false);

// let aaa = prettier.format(theValue.value, {
//     parser: 'html',
//     tabWidth: 2, // 设置缩进宽度
//     htmlWhitespaceSensitivity: 'ignore' // 忽略HTML标签之间的空格
// })

watchEffect(async ()=>{
    reFormatedTheValue.value= theValue.value
    console.log("watched Effect theValue.value changed")
    // console.log("watched Effect theValue.value changed",theValue.value)
    // let result = await prettier?.format(theValue.value, {
    //     parser: 'html',
    //     tabWidth: 2, // 设置缩进宽度
    //     htmlWhitespaceSensitivity: 'ignore' // 忽略HTML标签之间的空格
    // })

    // reFormatedTheValue.value = result;
})
</script>

<template>

    <div style="display: flex;" id="aaasss">
        <RemarkHoverEnlargable :contentHtmlStr="theValue"></RemarkHoverEnlargable>
        <RemarkHoverEnlargable :contentHtmlStr="theValue"></RemarkHoverEnlargable>
    </div>
    <div>
        <main id="sample">
            <Editor
                v-model="theValue"
                api-key="dxvhhu17oa85ujnbc57m43tuc0cmrovkrezy5j09qylqrhnb"
                :init="{
                    height:250,
                    // resize: 'both',
                    skin_url: `/tinymce/skins/ui/oxide`,
                    content_css:`/tinymce/skins/content/default/content.css`,
                    // plugins_url:`http://localhost:5173/tinymce/plugins/`,
                    toolbar_mode: 'sliding',
                    plugins: 'fullscreen template preview anchor autolink charmap codesample emoticons image link lists searchreplace table visualblocks wordcount',
                    // plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage advtemplate ai mentions tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
                    toolbar: 'fullscreen preview template| undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                    tinycomments_mode: 'embedded',
                    tinycomments_author: 'Author name',
                    contextmenu: 'template link image table',
                    mergetags_list: [
                      { value: 'First.Name', title: 'First Name' },
                      { value: 'Email', title: 'Email' },
                    ],
                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
                    template_mdate_format: '%m/%d/%Y : %H:%M:%S',
                    templates: [
                      { title: 'Mdate', description: 'Mdate example', content: '<p class=`mdate`>This will be replaced with the date modified</p>' }
                    ],
                    ai_request: (request, respondWith) => respondWith.string(() => Promise.reject(`See docs to implement AI Assistant`)),
                     setup: settingUp
                    }"
                initial-value="Welcome to TinyMCE!"
            />
        </main>
    </div>

    <br/>
    {{testStayEnlarged}}
    <HoverEnlargable
        style="
              --aniToWidth:450px;
              --aniToHeight:fit-content;
              --shrinkedWidth:50px;
              --shrinkedHeight:18px;
              --overlieWidth:11px;
              --aniFromWidthType:--shrinkedWidth;
              border: 1px solid blue;
              margin-left: 3px"
        :toStayEnlarged="testStayEnlarged"
        :style="{zIndex:parseInt($attrs[`zIndex`])}">
        <div class="theRmkContent" @click="testStayEnlarged = !testStayEnlarged">
            theValue:{{reFormatedTheValue}}
        </div>
    </HoverEnlargable>
    <el-button>showIt</el-button>
</template>

<style scoped>
:global(.tox.tox-tinymce-aux){
    z-index: 19891014;
}

:global(.tox-promotion){
    display: none;
}

:global(.tox-statusbar__branding){
    display: none;
}

:global(.tox-toolbar-overlord .tox-toolbar__group .tox-tbtn){
    margin: 1px 1px 0 0;
    /*width: 50px;*/
}

:global(.tox-toolbar-overlord .tox-toolbar__group .tox-tbtn--bespoke.tox-tbtn[aria-haspopup]){
    width: 70px;
}

:global(.tox-toolbar-overlord .tox-toolbar__group[title]){
    padding: 0 0 0 1px;
}

:global(.tox-mbtn.tox-mbtn--select[aria-haspopup]){
    margin:0 1px 1px 0;
    height: 20px;
}

:global(.tox-editor-container .tox-promotion .tox-toolbar__primary){

}
@media (min-width: 1024px) {
    #sample {
        display: flex;
        flex-direction: column;
        place-items: center;
        width: 100%;
    }
}
</style>